<template>
  <div class="basic frame_content">
    <table class="table-hover" style="margin-bottom: 40px">
      <tbody>
        <tr>
          <td>
            封盘前
            <input
              style="width:30px"
              type="text"
              readonly
              v-model="basicList.conf_time[0]"
            />秒
            <textarea
              style="width: 100%;height:234px"
              type="text"
              v-model="basicList.seal_before"
            ></textarea>
          </td>
          <td>
            开奖前:赛车
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[1]"
            />
            秒封盘--飞艇
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[2]"
            />
            秒封盘--时时彩
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[3]"
            />
            秒封盘--极速
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[4]"
            />
            秒封盘--澳10
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[5]"
            />
            秒封盘--澳5
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[6]"
            />
            秒封盘--荷兰极速赛车
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[7]"
            />
            秒封盘--荷兰极速时时彩
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[8]"
            />
            秒封盘--荷兰赛车
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[9]"
            />
            秒封盘--荷兰时时彩
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[10]"
            />
            秒封盘--UN澳洲5
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[11]"
            />
            秒封盘--UN澳洲10
            <input
              style="width:30px"
              type="text"
              v-model="basicList.conf_time[12]"
            />
            秒封盘
            <textarea
              style="width:100%; height:200px"
              v-model="basicList.seal_text"
            ></textarea>
          </td>
        </tr>
        <tr>
          <td>
            封盘后<input
              style="width:30px"
              type="text"
              id="time3"
              value="5"
            />秒下注核对
            <textarea
              style="width: 100%; height:200px"
              id="con3"
              v-model="basicList.bet_check"
            ></textarea>
          </td>
          <td>
            中奖明细
            <textarea
              style="width: 100%; height:200px"
              v-model="basicList.winning_details"
            ></textarea>
          </td>
        </tr>
        <tr>
          <td>
            会员积分
            <textarea
              style="width: 100%; height:200px"
              v-model="basicList.member_points"
            ></textarea>
          </td>
          <td>
            封盘后<input
              style="width:30px"
              type="text"
              name="time_6"
              id="time6"
              value="10"
            />秒自定义
            <textarea
              style="width: 100%; height:200px"
              name="con_6"
              id="con6"
            ></textarea>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="text-align: center">
            <button
              href="javascript:void(0);"
              class="btn btn-primary saveBtn"
              @click="basicEdit"
            >
              保存
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import http from "@/utils/http";
import { mapState, mapActions } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("basic", ["basicList"])
  },
  methods: {
    ...mapActions("basic", ["getBasicList"]),
    basicEdit() {
      console.log(this.basicList.conf_time);
      let conf_time = [
        this.basicList.conf_time[0],
        this.basicList.conf_time[1],
        this.basicList.conf_time[2],
        this.basicList.conf_time[3],
        this.basicList.conf_time[4],
        this.basicList.conf_time[5],
        this.basicList.conf_time[6],
        this.basicList.conf_time[7],
        this.basicList.conf_time[8],
        this.basicList.conf_time[9],
        this.basicList.conf_time[10],
        this.basicList.conf_time[11],
        this.basicList.conf_time[12]
      ];
      let strConf = conf_time.join();
      http
        .post(
          "/api/login/basis_set/edit?token=2Q3ntNqyo5eaLmXITABb",
          {
            room_number: 10086,
            id: 4,
            seal_before: this.basicList.seal_before,
            seal_text: this.basicList.seal_text,
            bet_check: this.basicList.bet_check,
            winning_details: this.basicList.winning_details,
            member_points: this.basicList.member_points,
            customize: this.basicList.customize,
            conf_time: strConf
          }
        )
        .then(response => {
          // console.log(response);
          if (response.data.status == true) {
            this.getBasicList();
          } else {
            Toast(response.data.msg);
          }
        });
    }
  },
  created() {
    this.getBasicList();
    console.log("创建");
  },
  mounted() {
    console.log("挂zai");
  }
};
</script>

<style>
.basic {
  margin: 0;
  margin-top: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  background-color: #fff;
}
.table-hover {
  font-size: 13px;
  width: 96%;
  margin: auto;
  border: 1px solid #ddd;
  border-left: 0;
  border-collapse: separate;
  border-radius: 4px;
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}
.table-bordered caption + thead tr:first-child th,
.table-bordered caption + tbody tr:first-child th,
.table-bordered caption + tbody tr:first-child td,
.table-bordered colgroup + thead tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td,
.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: #f5f5f5;
}
.table-hover td,
.table-hover th {
  border-left: 1px solid #ddd;
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table-hover #time1 {
  cursor: not-allowed;
  background-color: #eee;
}
.table-hover textarea,
input[type="text"] {
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border linear 0.2s, box-shadow linear 0.2s;
  display: inline-block;
  height: 20px;
  margin-bottom: 10px;
  padding: 1px;
  font-size: 14px;
  line-height: 20px;
  color: #555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.table-hover .btn-primary {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  background-image: linear-gradient(to bottom, #08c, #04c);
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  border: 1px solid #ccc;
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;
}
</style>
